<template>
  <div class="component-editor">
    <!--组件配置-->
    <el-card v-for="(info, info_key, info_index) in propsGroup" :key="info_key" :style="info_index > 0 ? 'margin-top: 10px;' : ''">
      <div slot="header" @click="info.show = !info.show" :style="{color: info.show ? '#faad14' : 'inherit'}">
        <i :class="info.show ? 'el-icon-minus' : 'el-icon-plus'"></i>
        <span>{{ info.name }}</span>
      </div>
      <div v-show="info.show">
        <template v-for="(item, item_key) in info.props" v-if="(!item.editor.work || item.editor.work()) && item.editor.ignore">
          <template v-if="item.editor.type == 'custom'"></template>
          <div class="form-item" v-else :key='item_key'>
            <div class="label">
              <el-tooltip placement="top">
                <div style="max-width:300px" slot="content">{{ item.editor.desc }}</div>
                <span>{{ item.editor.label }}</span>
              </el-tooltip>
            </div>
            <div class="value">
              <!-- 文本相关 -->
              <el-input v-if="item.editor.type == 'string'" size="mini" v-model="componentInfo[item_key]"></el-input>
              <el-input v-else-if="item.editor.type == 'number'" type="number" size="mini" v-model.number="componentInfo[item_key]"></el-input>
              <el-input v-else-if="item.editor.type == 'input'" size="mini" v-model="componentInfo[item_key]"></el-input>
              <el-input v-else-if="item.editor.type == 'text'" :autosize="{ minRows: 2, maxRows: 5}" type="textarea" size="mini" v-model="componentInfo[item_key]"></el-input>
              <rich-text v-else-if="item.editor.type == 'richtext'" :id='item_key' v-model="componentInfo[item_key]"></rich-text>
              <y-color-picker v-else-if="item.editor.type == 'color'" v-model="componentInfo[item_key]" show-alpha></y-color-picker>
              <!-- json -->
              <attr-data v-else-if="item.editor.type == 'object'" type="object" :content.sync="componentInfo[item_key]"></attr-data>
              <attr-data v-else-if="item.editor.type == 'array'" type="array" :content.sync="componentInfo[item_key]"></attr-data>
              <attr-data v-else-if="item.editor.type == 'data'" :content.sync="componentInfo[item_key]"></attr-data>
              <!-- 布尔值 -->
              <el-switch v-else-if="item.editor.type == 'boolean'" size="mini" v-model="componentInfo[item_key]"></el-switch>
              <!-- 枚举 -->
              <el-select v-else-if="item.editor.type == 'enum'" :multiple="item.editor && item.editor.multiple" size="mini" v-model="componentInfo[item_key]" placeholder="请选择">
                <el-option v-for="(enum_v, enum_k) in enumFilter(item.editor.defaultList)" :key="enum_k" :label="enum_v.label" :value="enum_v.value"></el-option>
              </el-select>
              <!-- 图片 -->
              <template v-else-if="item.editor.type == 'image'">
                <attr-resource type="image" :url.sync="componentInfo[item_key]"></attr-resource>
              </template>
              <attr-resource v-else-if="item.editor.type == 'audio'" type="audio" :url.sync="componentInfo[item_key]"></attr-resource>
              <attr-resource v-else-if="item.editor.type == 'video'" type="video" :url.sync="componentInfo[item_key]"></attr-resource>
              <attr-resource v-else-if="item.editor.type == 'file'" type="file" :url.sync="componentInfo[item_key]"></attr-resource>
              <!-- 方法调用 -->
              <attr-function v-else-if="item.editor.type == 'function'" :content.sync="componentInfo[item_key]"></attr-function>
            </div>
          </div>
        </template>
      </div>
    </el-card>
  </div>
</template>

<script>
// 颜色选择组件
import YColorPicker from '../components/ColorPicker'
import Props from '../script/props'
export default {
  name: 'maliangeditor',
  components: {
    YColorPicker
  },
  props: {
    // 编辑器会传递给编辑面板组件的属性值，编辑器可以修改这些值来达到控制组件数据的作用
    componentInfo: { // 固定字段，收集所有属性值
      type: [Object],
      default () {
        return {
        }
      }
    }
  },
  data: function () {
    return {
      usedatasource: false,
      groupDefault: 'base',
      groupList: {
        base: {
          name: '组件设置',
          show: true
        },
      },
      propsGroup: {},
    }
  },
  computed: {
  },
  watch: {
    'componentInfo': {
      handler (v) {
        console.log(v)
      },
      deep: true
    }
  },
  mounted () {
    let propsInfo = Props
    for (let key in propsInfo) {
      if (!propsInfo[key].editor.ignore) {
        continue
      }
      let groupId = this.groupList[this.groupDefault]
      let groupName = this.groupList[this.groupDefault].name || groupId
      let groupShow = this.groupList[this.groupDefault].show || false
      if (propsInfo[key].editor.group && propsInfo[key].editor.group.id) {
        groupId = propsInfo[key].editor.group.id
        groupName = this.groupList[groupId] && this.groupList[groupId].name ? this.groupList[groupId].name : groupId
        groupShow = this.groupList[groupId] && this.groupList[groupId].show ? this.groupList[groupId].show : false
      }
      if (!this.propsGroup.hasOwnProperty(groupId)) {
        this.$set(this.propsGroup, groupId, {
          id: groupId,
          name: groupName,
          show: groupShow,
          props: {}
        })
      }
      if (propsInfo[key].editor.work) {
        // 重新绑定this指向
        propsInfo[key].editor.work = propsInfo[key].editor.work.bind(this.componentInfo)
      }
      this.$set(this.propsGroup[groupId].props, key, propsInfo[key])
    }
  },
  methods: {
    enumFilter (list) {
      if (!list) return []
      if (list instanceof Array) {
        return list.map(li => {
          return {
            label: li,
            value: li
          }
        })
      }
      if (typeof list === 'object') {
        return Object.entries(list).map(([key, value]) => {
          return {
            label: value,
            value: key
          }
        })
      }
      return list
    }
  }
}
</script>

<style lang="scss" scoped>
.component-editor {
  .el-card {
    & >>> .el-card__header {
      padding: 5px;
    }
    & >>> .el-card__body {
      padding: 0;
    }
  }
  .el-tabs.el-tabs--border-card {
    border-radius: 5px;
    overflow: hidden;
    & >>> .el-tabs__header {
      .el-tabs__new-tab {
        margin: 5px;
      }
    }
    .w-help {
      height: 30px;
      line-height: 30px;
      padding-left: 5px;
      color: #c8c8c8;
    }
  }
  .el-select, .el-date-editor {
    width: 100%;
  }
}
</style>